<template>
    <div class="maind" style="padding-top:40px ;height: calc(100% - 5px);">
        <main>
            <el-header>
                <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                    @clear="lookForm()"></el-input>
                <el-button class="look" size="small" @click="getassignmentList()">查询</el-button>
                <el-button class="add" size="small" @click="addForms()">新增</el-button>
                <el-button class="delet" size="small" @click=" machDelete(selectedRows)" :disabled="esdisabled"
                    :class="{ active: esdisabled == false }">批量删除</el-button>
                <el-button style="color: #FFF; background-color: #17b3a3;" size="small">导出EXCEL</el-button>
            </el-header>
            <!-- 数据渲染的列表 -->
            <el-table style="height:calc(100% - 85px);" :data="assignmentList" border :row-style="{ height: '40px' }"
                :cell-style="{ padding: '0px' }" @selection-change="handleSelectionChange" size="mini">

                <!-- 选择框列 -->
                <el-table-column type="selection" width="50"></el-table-column>


                <el-table-column label="家系名称" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="姓名" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sourceId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="身份证号" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sourceIdCard }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createOn }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="修改时间" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.modifiedOn }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button style="color: #17b3a3; " size="mini" type="text"
                            @click="handleEdit(scope.row)">修改</el-button>
                        <el-button style="color: #17b3a3; " size="mini" type="text"
                            @click="handLook(scope.row)">添加成员</el-button>
                        <el-button style="color: #17b3a3; " size="mini" type="text"
                            @click="jiaclick(scope.row)">查看成员</el-button>
                    </template>
                </el-table-column>
            </el-table>



            <!-- 新增或者编辑 -->
            <el-dialog :title="id ? '修改' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="addassignment" ref="addassignment" label-width="100px" size="mini"
                    class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="名称">
                                <el-input v-model="addassignment.name" placeholder="名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="来源姓名">
                                <el-input v-model="addassignment.sourceId" placeholder="来源姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="身份证号">
                                <el-input v-model="addassignment.sourceIdCard" placeholder="身份证号"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="24">
                            <el-form-item label="列数">
                                <el-input-number v-model="addassignment.columnNums" :min="1" :max="100" @change="column" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="类型">
                                <el-select v-model="addassignment.encodingType" placeholder="请选择位置码类型">
                                    <el-option v-for="(item, index) in encodingType" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <!-- 分割线 -->
                        <!-- <el-col :span="24">
                            <h6 style="height: 1px; background-color: #DCDFE6; margin: 24px 0 ;"></h6>
                        </el-col> -->


                        <!--
                        <el-col :span="12">
                            <el-form-item label="宽度">
                                <el-input-number v-model="addassignment.width" :min="1" :max="100" @change="width" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="高度">
                                <el-input-number v-model="addassignment.height" :min="1" :max="100" @change="depth" />
                            </el-form-item>
                        </el-col> -->


                        <!-- <el-col :span="12">
                            <el-form-item label="是否可用">
                                <el-radio v-model="addassignment.enabled" label="1">可用</el-radio>
                                <el-radio v-model="addassignment.enabled" label="2">不可用</el-radio>
                            </el-form-item>
                        </el-col> -->

                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="addassignment.remark">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>



            <!-- 添加家庭成员 -->
            <el-dialog title="新增家庭成员" :visible.sync="dialogVisible">
                <el-form :model="familymentList" ref="familymentList" label-width="100px" size="mini"
                    class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="家系">
                                <p>{{ familyName }} <span>({{ familyID }})</span></p>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证号">
                                <el-input v-model="familymentList.idCard" placeholder="身份证号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名">
                                <el-input v-model="familymentList.name" placeholder="姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别">
                                <el-radio v-model="familymentList.sex" :label="1">男</el-radio>
                                <el-radio v-model="familymentList.sex" :label="2">女</el-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="年龄">
                                <el-input-number v-model="familymentList.age" :min="1" :max="100" @change="column" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="电话">
                                <el-input v-model="familymentList.telephone" placeholder="电话"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="生日">
                                <el-date-picker v-model="familymentList.birthday" type="date" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱">
                                <el-input v-model="familymentList.email" placeholder="邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="民族">
                                <el-input v-model="familymentList.nation" placeholder="民族"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="居住地">
                                <el-input v-model="familymentList.comeFrom" placeholder="居住地"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="家庭住址">
                                <el-input v-model="familymentList.homeAddress" placeholder="家庭住址"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 
                        <el-col :span="24">
                            <el-form-item label="类型">
                                <el-select v-model="addassignment.encodingType" placeholder="请选择位置码类型">
                                    <el-option v-for="(item, index) in encodingType" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <!--
                        <el-col :span="12">
                            <el-form-item label="宽度">
                                <el-input-number v-model="addassignment.width" :min="1" :max="100" @change="width" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="高度">
                                <el-input-number v-model="addassignment.height" :min="1" :max="100" @change="depth" />
                            </el-form-item>
                        </el-col> -->


                        <!-- <el-col :span="12">
                            <el-form-item label="是否可用">
                                <el-radio v-model="addassignment.enabled" label="1">可用</el-radio>
                                <el-radio v-model="addassignment.enabled" label="2">不可用</el-radio>
                            </el-form-item>
                        </el-col> -->

                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="familymentList.remark">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="success" @click="addFamily()">添加</el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>



            <!-- 查看成员 -->
            <el-dialog title="家系成员列表" :visible.sync="JiaDiago" append-to-body>
                <el-col :span="24">
                        <p>家系：  {{ familyName }} <span>({{ familyID }})</span></p>
                </el-col>
                <el-table :data="Jia" size="mini">
                    <el-table-column label="身份证号" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="性别" width="180">
                        <template slot-scope="scope">
                            <span v-show="scope.row.sex == '1'">男</span>
                            <span v-show="scope.row.sex == '2'">女</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="年龄" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.age }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="电话" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="生日" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.birthday }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="邮箱" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.email }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="民族" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.nation }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :page="JiaPage.page" :componentTotal="JiaTatol" @changeRows="setRows" @changePage="setPage">
                </pagination>
            </el-dialog>


















            <pagination :page="queryInfo.page" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>


        </main>
    </div>
</template>

<script>
import Pagination from "../Pagination.vue";
export default {
    data() {
        return {
            id: '',
            dialogFormVisible: false,
            dialogVisible: false,//添加家庭成员
            esdisabled: true,
            readonly: false,
            total: 0,
            queryInfo: {
                t: '',
                page: 1,
                limit: 10,
                key: '',
            },


            //动态获取到的数据
            assignmentList: [],
            //接口需要上传的数据
            addassignment: {
                "t": 1729579028854,
                "name": "纳垢欢乐大家庭",
                "sourceId": "JJJNNNNN",
                "sourceName": "",
                "sourceIdCard": "112334455667788",
                "createOn": "",
                "createUserId": "",
                "createBy": "",
                "modifiedOn": "",
                "modifiedUserId": "",
                "modifiedBy": "",
                "remark": "asdasdddd"
            },


            //批量操作的数组
            selectedRows: [],



            //添加家庭成员
            familyment: [],//接口获取到的数据
            //添加时需要上传的数据
            familymentList: {
                "t": 1729580922183,
                "idCard": "123123123332223123",//身份证号
                "innerNo": "",
                "name": "姓名",//姓名
                "sex": 2,//性别
                "companyName": "",
                "duty": "",
                "birthday": "1235-08-22 00:00:00 00:00:00",//生日
                "age": "99",//年龄
                "mobile": "",
                "telephone": "电话",//电话
                "email": "asdasd",//邮箱
                "nation": "汉",//民族
                "comeFrom": "居住地",//居住地
                "homeAddress": "家庭住址",//家庭住址
                "maritalStatus": "",
                "xisNum": "",
                "admissionNumber": "",
                "isInFormed": "",
                "pathologicalNum": "",
                "clinicalDiagnosis": "",
                "clinicNum": "",
                "checkNum": "",
                "checkPoint": "",
                "illnessName": "",
                "xpublicState": "",
                "department": "",
                "diagnosticTime": "",
                "familyState": "",
                "familyId": 70,//家庭的ID
                "createOn": "2024-10-22 15:07:35",
                "createUserId": "",
                "createBy": "",
                "modifiedOn": "2024-10-22 15:07:35",
                "modifiedUserId": "",
                "modifiedBy": "",
                "remark": "备注",//备注
                "back11": "",
                "back12": "",
                "back13": "",
                "back14": "",
                "back15": "",
                "back16": "",
                "back17": "",
                "back18": "",
                "back19": "",
                "back20": "",
                "back21": "",
                "back22": "",
                "back23": "",
                "back24": "",
                "back25": "",
                "back26": "",
                "back27": "",
                "back28": "",
                "back29": "",
                "back30": "",
                "back31": "",
                "back32": "",
                "back33": "",
                "back34": "",
                "back35": "",
                "back36": "",
                "back37": "",
                "back38": "",
                "back39": ""
            },

            //家庭成员的家系信息
            familyName: '',
            familyID: '',

            //冻存架数据
            JiaDiago: false,//冻存架弹框
            Jia: [],//冻存架数据
            JiaTatol: 0,//最大页码
            JiaPage: {//页码树
                page: 1,
                limit: 10,
                familyId:'',
                t: '',
            },






            encodingType: [
                { label: "纯数字", value: "1" },
                { label: "混合", value: "2" },
            ],
        }
    },
    methods: {
        lookForm(){
            this.queryInfo= {
                t: '',
                page: 1,
                limit: 10,
                key: '',
            };
            this.getassignmentList();
        },
//----------------------------------------------------------------------------------------------------------------
        //冻存架查询
        async geJiaList() {
            this.JiaPage.t = new Date().getTime()
            const { data: res } = await this.axios.get("/api/biosample/donorsinfo/list", {
                params: this.JiaPage
            })
            // console.log(res);
            this.Jia = res.page.list;
            // console.log(this.assignmentList);
            this.JiaTatol = res.page.totalCount;//
        },
        //冻存架弹出框
       async  jiaclick(row) {
            this.JiaDiago = true;
            this.JiaPage.familyId = row.id;
            const { data: res } = await this.axios.get(`api/biosample/familyman/info/${row.id}`);
            this.familyName = res.familyMan.name;
            this.familyID = res.familyMan.sourceIdCard;
            this.geJiaList();
        },





















        //初始化数据
        addForms() {
            this.id = '';
            this.addassignment = {
                "t": 1729568116396,
                "parentId": 0,
                "code": "",//编码
                "fullName": " ",//名成
                "targetTable": "",
                "isTree": 0,
                "useItemCode": 1,
                "useItemName": 1,
                "useItemValue": 1,
                "enabled": 1,
                "allowEdit": 1,
                "allowDelete": 1,
                "sortCode": 1,
                "remark": "",//备注
                "createUserId": "",
                "createdBy": "",
                "createdOn": "",
                "modifiedUserId": "",
                "modifiedBy": "",
                "modifiedOn": ""
            };
            this.dialogFormVisible = true;
        },
        // 获取任务列表
        async getassignmentList() {
            this.queryInfo.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/familyman/list", {
                params: this.queryInfo
            })
            // console.log(res);
            this.assignmentList = res.page.list;
            // console.log(this.assignmentList);
            this.total = res.page.totalCount;//最大页数
            if (res.code != 0) return this.$message.error("获取任务列表失败");
        },
        //添加新增
        async addForm() {
            this.addassignment.t = new Date().getTime();
            const { data: res } = await this.axios.post("api/biosample/fluprecord/list", this.addassignment);
            if (res.code != 0) return this.$message.error("新增失败");
            this.$message.success("新增成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        // 表格回显
        async handleEdit(row) {
            // console.log(row);
            this.dialogFormVisible = true;
            this.id = row.id;
            this.addassignment.t = new Date().getTime();
            const { data: res } = await this.axios.get(`api/biosample/familyman/info/${this.id}`, this.addassignment.t);
            this.addassignment = res.familyMan;
        },
        //修改的接口
        async editForm() {
            const { data: res } = await this.axios.post("api/biosample/familyman/update", this.addassignment);
            if (res.code != 0) return this.$message.error("修改失败");
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //单个删除
        handleDelete(row) {
            // console.log(row);
            this.$confirm(`是否删除[${row.id}]数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteTeam(row.id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async deleteTeam(id) {
            const { data: res } = await this.axios.post(`api/biosample/sysitems/delete`, [id]);
            if (res.code != 0) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        // 分页器
        setRows(val) {
            this.queryInfo.limit = val;
            this.getassignmentList();
            this.JiaPage.limit = val;
            this.geJiaList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
            this.JiaPage.page = val;
            this.geJiaList();
        },
        //批量删除
        handleSelectionChange(selection) {
            // this.selectedRows = selection;
            // console.log('Selected Rows:', this.selectedRows);
            this.selectedRows = selection.map(item => item.id);
            // console.log( this.selectedRows);
            if (this.selectedRows.length > 0) {
                this.esdisabled = false
            } else {
                this.esdisabled = true
            }

        },
        machDelete(id) {
            // console.log(row);
            this.$confirm(`是否删除[${id}]数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.handledeleteTeam(id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async handledeleteTeam(id) {
            const { data: res } = await this.axios.post(`api/biosample/sysitems/delete`, id);
            if (res.code != 0) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },


        //家庭成员弹框
        async handLook(row) {
            // console.log(row);
            this.dialogVisible = true;
            this.id = row.id;
            const { data: res } = await this.axios.get(`api/biosample/familyman/info/${this.id}`);
            this.familyName = res.familyMan.name;
            this.familyID = res.familyMan.sourceIdCard;
            this.familymentList = {
                "idCard": "",//身份证号
                "innerNo": "",
                "name": "",//姓名
                "sex": 2,//性别
                "companyName": "",
                "duty": "",
                "birthday": "",//生日
                "age": "0",//年龄
                "mobile": "",
                "telephone": "",//电话
                "email": "",//邮箱
                "nation": "",//民族
                "comeFrom": "",//居住地
                "homeAddress": "",//家庭住址
                "maritalStatus": "",
                "xisNum": "",
                "admissionNumber": "",
                "isInFormed": "",
                "pathologicalNum": "",
                "clinicalDiagnosis": "",
                "clinicNum": "",
                "checkNum": "",
                "checkPoint": "",
                "illnessName": "",
                "xpublicState": "",
                "department": "",
                "diagnosticTime": "",
                "familyState": "",
                "familyId": row.id,//家庭的ID
                "createOn": "2024-10-22 15:07:35",
                "createUserId": "",
                "createBy": "",
                "modifiedOn": "2024-10-22 15:07:35",
                "modifiedUserId": "",
                "modifiedBy": "",
                "remark": "",//备注
            };
        },
        //添加家庭成员
        async addFamily() {
            this.familymentList.t = new Date().getTime();
            const { data: res } = await this.axios.post("api/biosample/donorsinfo/save", this.familymentList);
            if (res.code != 0) return this.$message.error("新增失败");
            this.$message.success("新增成功");
            this.dialogVisible = false;
        },





        //取消操作
        resetForm() {
            this.addForms();
            this.dialogFormVisible = false;
            this.dialogVisible = false;
        },
        //加减框
        //层
        Age(val) {
            this.addassignment.rowNums = val;
        },
        //列
        column(val) {
            this.familymentList.age = val;
        },
        //宽
        width(val) {
            this.addassignment.width = val;
        },
        //深
        depth(val) {
            this.addassignment.height = val;
        },
    },
    mounted() {
        this.getassignmentList()
    },
    components: {
        Pagination
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
    text-align: center;
}

main {

    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.el-header {
    padding: 0;
    float: left;
    width: 100%;
    ;

    .el-input {
        width: 185px;
        margin-right: 15px;
    }

    .delet {
        color: #fff;
        background-color: #fab6b6;
        border-color: #fab6b6;
    }

    .active {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
    }

    .add {
        color: #fff;
        background-color: #17b3a3;
        border-color: #17b3a3;
    }
}
</style>